<div class="modal fade bs-modal-lg" id="modelContent">
	<div class="modal-dialog modal-lg">
        <div class="modal-content resultsTable" style="width:1224px;margin-left:-300px;"></div>
    </div>
</div> 
<div class="portlet box green">
	<div class="portlet-title">
	    <div class="caption"><i class="fa fa-cog"></i>关联货品</div>
		<div class="tools">
			<a href="javascript:;" class="collapse right" data-original-title="" title=""> </a>
			<!-- <a href="" class="fullscreen" data-original-title="" title=""> </a> -->
    	</div>
    	<div class="actions">
			<a href="javascript:;" class="btn white btn-sm ajax-search"><i class="fa fa-search"></i> 查询 </a>
			<a href="javascript:;" class="btn white btn-sm search-reset"><i class="fa fa-eraser"></i> 清除 </a>
		</div>
	</div>
	<div class="portlet-body form">
	   	<form action="/productRelevance/list" class="form-horizontal" method="get" id="searchForm">
			<div class="form-body">
				<div class="row">
					<div class="col-md-3">
						<label class="col-md-4 control-label">货品：</label>
						<div class="col-md-8">
							 <select title="输入货品名称或编码" class="js-data-user-ajax form-control" name="id">
								#if($!id)
								 <option value="$!id">$!id</option>
								#end
							</select>
						</div>
					</div>
	    		</div>
			</div>
		</form>
	</div>
</div>

<div class="portlet box green">
    <div class="portlet-title">
		<div class="caption"><i class="fa fa-cogs"></i>数据列表</div>
		<div class="tools"><a href="javascript:;" class="collapse" data-original-title="" title=""> </a></div>
		<div class="actions"><a href="/productRelevance/add" class="btn white btn-sm ajaxify" ><i class="fa fa-plus"></i> 新增 </a></div>
    </div>
    <div class="portlet-body">
	 	<div class="form-group">
			<div class="alert alert-block alert-warning fade in">
	                  <button type="button" class="close" data-dismiss="alert"></button>
	                  <strong> 注：</strong>
	                  <p style="text-indent: 2em; ">1、关联货品显示不了的名称用省略号表示，但鼠标放在商品会有全部商品名称提示。2、编辑：跳转至编辑页面新增删除关联货品。3、禁用：只是禁用关联关系。4、解散：只是删除了关联关系，对应的该行记录也删除。</p>
	             </div>
		</div>
    	<div class="dataTables_wrapper no-footer">
			<div class="table-scrollable">
			    <table class="table table-striped table-bordered table-hover">
				  	<thead>
						<tr>
		   		 			<th>序号</th>
		   		 			<th>关联货品</th>
		   		 			<td style="width: 5%;">数量</td>
							<th class="col-md-2">操作</th>
						</tr>
					</thead>
					<tbody>
					#foreach($item in $pageProductRelevance.result)
		  				<tr>  
						    <td>$!velocityCount</td>
						    <td>
						    	<div title="$!item.productNames"  style="overflow: hidden;text-overflow: ellipsis; display: box;display: -webkit-box;  line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
						    		  $!item.productNames 
						    	</div>
						   </td>
						    <td>$!item.total</td>
			    			<td>
						    	<a class="btn green btn-outline btn-sm ajaxify" href="/productRelevance/edit?id=$!item.id&"> 
									<i class="fa fa-edit"></i>编辑
								</a>
								<a class="btn green btn-outline btn-sm ajax-update"  t_msg="确定解散吗？ " thref="/productRelevance/delete?id=$!item.id"  t_href="/productRelevance/list" href="javascript:;"  >
									<i class="fa fa-trash"></i>解散
								</a>
								
								#set($state = "启用")
								#if($!item.state == "true")
									#set($state = "禁用")
								#end
								<a class="btn green btn-outline btn-sm ajax-update "  t_msg="确定 $!state 吗？ " thref="/productRelevance/editState?id=$!item.id"  t_href="/productRelevance/list" href="javascript:;" thref="#">
									<i class="fa fa-clone"></i> $!state
								</a>
						    </td>		  			
		  				</tr>
					#end
					</tbody>
				</table>
			</div>
			#set($page=$pageProductRelevance)
			#set($pageUrl="/productRelevance/list?&pageNo=")
			#parse("_page.htm")
		</div>
    </div>
</div>

<script type="text/javascript">
function formatUser(repo) {
	  if (repo.loading) {
		    return repo.text;
	  }
	var markup = "<div class='select2-result-repository clearfix'>"
					+ "<div >"
							+ "<div class='select2-result-repository__title'>货品名称：" + repo.name+"</div>"
							+ "<div class='select2-result-repository__description'>货品编码："+ repo.code + "</div>"
						+"</div>"
					+"</div>";
	return markup;
}

function formatRepoSelection(repo) {
	return   repo.id;
}

$(' .js-data-user-ajax').select2({
	ajax : {
		url : "product/getProduct",
		 dataType: 'json',
		delay : 250,
		async : false,
		data : function(params) {
			var term= params.term ; 
			return {
				product:term, 
				pageNo : params.page||1
			};
		},
		processResults: function (data, params) {
		    params.page = params.page || 1;

		    return {
		        results: data.result,
		        pagination: {
		            more: (params.page * 10) < data.totalCount
		        }
		    };
		},
		cache : true
	},
	width : "off",
	escapeMarkup : function(markup) {
		return markup;
	},
	placeholder:'请选择',
	minimumInputLength : 1,
	language: "zh-CN",
	templateResult : formatUser,
	templateSelection : formatRepoSelection
});
</script>
